import React, { Component } from 'react'
import './index.scss'
import { withRouter } from 'react-router-dom'
import '../../font/iconfont.css'
import { connect } from 'react-redux'
import axios from "axios"
class Header extends Component {
  state = {
    word: [],
  }
  render() {
    const { history } = this.props
    return (
      <div className='header'>
        <div className="headerLogo" onClick={() => { history.push('/') }}></div>
        <div className="headerSearch">
          <span className='iconfont icon-fangdajing'></span>
          <input type="text" placeholder='搜索商品，共36122款好物'  ref='submit' onChange={
            (e) => {
              axios.get("/xhr/search/searchAutoComplete.json?__timestamp=1598521334281&keywordPrefix=" + e.target.value).then(
                res => {
                  console.log(res.data.data)
                  let word = res.data.data
                  this.setState({
                    word,
                  })
                }
              )
            }
          }
            onKeyDown={(e) => {
              // 输入框内容不为空且按下回车键，则请求数据
              if (e.keyCode === 13 && e.target.value !== '') {
               
                let word = []
                this.setState({
                  word,
                })
                // this.search(e.target.value)
                this.props.history.push('/Search?__timestamp=1598528836839&keyword=' + e.target.value)
                e.target.value = ""
              }
            }}></input>
        </div>
        {!localStorage.getItem('loginId') === false ? '' : <div className="headerLogin" onClick={() => { history.push('/login') }}>登录</div>}
        {/* 搜索的下拉菜单 */}
        <div className="recommend">
          <div className="keyWordBox">
            {this.state.word.map((v, i) =>
              <div key={i} className="keyWord" onClick={
                (e) => {
                  this.props.history.push('/Search?__timestamp=1598528836839&keyword=' + e.target.innerHTML)
                  const inputDom = this.refs.submit;
                  inputDom.value=''
                  let word = []
                  this.setState({
                    word
                  })
                }
              }>{v}</div>
            )}
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    username: state.getIn(['userReducer', 'userInfo', 'userName']),
    isLogin: state.getIn(['userReducer', 'isLogin'])
  }
}

export default connect(mapStateToProps, null)(withRouter(Header))
